<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>357智力开发小游戏</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f8ff;
            text-align: center;
            padding: 20px;
        }
        .game-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .card-row {
            display: flex;
            justify-content: center;
            margin: 15px 0;
        }
        .card {
            width: 60px;
            height: 90px;
            background-color: #4169e1;
            border-radius: 5px;
            margin: 0 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        }
        .card.selected {
            background-color: #ff4500;
        }
        .card.removed {
            visibility: hidden;
        }
        .status {
            font-size: 1.2em;
            margin: 20px 0;
            font-weight: bold;
        }
        .restart-btn {
            padding: 10px 20px;
            background-color: #4169e1;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            margin-top: 20px;
        }
        .restart-btn:hover {
            background-color: #3a5fcd;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>357小游戏</h1>
        <p>游戏规则：每次只能从一行中取牌，至少取一张，拿到最后一张牌的人输！</p>
        <p>你是玩家1，你的对手是玩家2</p>
        
        <div class="status" id="status">玩家1的回合</div>
        
        <div class="card-row" id="row3">
            <!-- 3张牌 -->
            <div class="card" onclick="selectCard(this, 0)"></div>
            <div class="card" onclick="selectCard(this, 0)"></div>
            <div class="card" onclick="selectCard(this, 0)"></div>
        </div>
        
        <div class="card-row" id="row5">
            <!-- 5张牌 -->
            <div class="card" onclick="selectCard(this, 1)"></div>
            <div class="card" onclick="selectCard(this, 1)"></div>
            <div class="card" onclick="selectCard(this, 1)"></div>
            <div class="card" onclick="selectCard(this, 1)"></div>
            <div class="card" onclick="selectCard(this, 1)"></div>
        </div>
        
        <div class="card-row" id="row7">
            <!-- 7张牌 -->
            <div class="card" onclick="selectCard(this, 2)"></div>
            <div class="card" onclick="selectCard(this, 2)"></div>
            <div class="card" onclick="selectCard(this, 2)"></div>
            <div class="card" onclick="selectCard(this, 2)"></div>
            <div class="card" onclick="selectCard(this, 2)"></div>
            <div class="card" onclick="selectCard(this, 2)"></div>
            <div class="card" onclick="selectCard(this, 2)"></div>
        </div>
        
        <button class="restart-btn" onclick="restartGame()">重新开始</button>
        <button id="confirmBtn" class="restart-btn" onclick="confirmSelection()" style="display: none;">确认选择</button>
    </div>

    <script>
        let currentPlayer = 1;
        let selectedCards = [];
        let selectedRow = -1;
        let isAIMode = true; // 添加AI模式开关
        
        function selectCard(card, rowIndex) {
            if (currentPlayer === 2 && isAIMode) return; // AI回合时禁止玩家操作
            
            // 如果已经选择了其他行的牌，不能跨行选
            if (selectedRow !== -1 && selectedRow !== rowIndex) {
                return;
            }
            
            selectedRow = rowIndex;
            
            // 切换选中状态
            if (card.classList.contains('selected')) {
                card.classList.remove('selected');
                const index = selectedCards.indexOf(card);
                if (index > -1) {
                    selectedCards.splice(index, 1);
                }
            } else {
                card.classList.add('selected');
                selectedCards.push(card);
            }
            
            // 显示确认按钮
            document.getElementById('confirmBtn').style.display = 'inline-block';
        }
        
        function confirmSelection() {
            if (selectedCards.length === 0) {
                alert('请至少选择一张牌！');
                return;
            }
            
            // 移除选中的牌
            selectedCards.forEach(card => {
                card.classList.add('removed');
            });
            
            // 检查游戏是否结束
            const totalCards = document.querySelectorAll('.card:not(.removed)').length;
            if (totalCards === 0) {
                document.getElementById('status').textContent = `玩家${currentPlayer}输了！`;
                document.getElementById('confirmBtn').style.display = 'none';
                return;
            }
            
            // 切换玩家
            currentPlayer = currentPlayer === 1 ? 2 : 1;
            document.getElementById('status').textContent = `玩家${currentPlayer}的回合`;
            
            // 如果是AI模式且轮到AI
            if (isAIMode && currentPlayer === 2) {
                setTimeout(aiMove, 1000); // 延迟1秒让玩家看清AI操作
            }
            
            // 重置选择
            selectedCards = [];
            selectedRow = -1;
            document.getElementById('confirmBtn').style.display = 'none';
        }
        
        function aiMove() {
            // 获取剩余牌的行信息
            const rows = [
                document.querySelectorAll('#row3 .card:not(.removed)').length,
                document.querySelectorAll('#row5 .card:not(.removed)').length,
                document.querySelectorAll('#row7 .card:not(.removed)').length
            ];
            
            // 找出还有牌的行
            const availableRows = rows.map((count, index) => count > 0 ? index : -1).filter(i => i !== -1);
            
            // 随机选择一行
            const rowIndex = availableRows[Math.floor(Math.random() * availableRows.length)];
            const rowCards = document.querySelectorAll(`#row${[3,5,7][rowIndex]} .card:not(.removed)`);
            
            // 随机取1到剩余牌数的牌
            const takeCount = Math.floor(Math.random() * rowCards.length) + 1;
            
            // 选中并移除牌
            for (let i = 0; i < takeCount; i++) {
                rowCards[i].classList.add('removed');
            }
            
            // 检查游戏是否结束
            const totalCards = document.querySelectorAll('.card:not(.removed)').length;
            if (totalCards === 0) {
                document.getElementById('status').textContent = `玩家${currentPlayer}输了！`;
                return;
            }
            
            // 切换回玩家
            currentPlayer = 1;
            document.getElementById('status').textContent = `玩家${currentPlayer}的回合`;
        }
        
        function restartGame() {
            // 重置所有牌
            const cards = document.querySelectorAll('.card');
            cards.forEach(card => {
                card.classList.remove('selected');
                card.classList.remove('removed');
            });
            
            // 重置游戏状态
            currentPlayer = 1;
            selectedCards = [];
            selectedRow = -1;
            document.getElementById('status').textContent = '玩家1的回合';
            document.getElementById('confirmBtn').style.display = 'none';
        }
    </script>
</body>
</html>